Wireframe verstehen - Funktionen, Elemente und Typen

Definition von Wireframe

Ein Wireframe ist, einfach ausgedrückt, eine visuelle Darstellung einer Webseite, einer Benutzeroberfläche oder eines Bildschirmdesigns. Es handelt sich um ein zweidimensionales Skelettmodell, in dem nur Linien und Eckpunkte dargestellt werden.

Wireframes werden erstellt, um die Elemente so anzuordnen, dass sie einen bestimmten Zweck am besten erfüllen. Der Zweck wird in der Regel durch ein Geschäftsziel und eine kreative Idee bestimmt. Für diejenigen, die eine Webseite oder eine Benutzeroberfläche erstellen möchten, sind Wireframes die Grundlage, auf der man mit dem Aufbau beginnen kann.

Funktionen von Wireframe

Wenn Sie die 3 Merkmale des Wireframe verstehen, können Sie sich ein besseres Bild von dieser Art von Diagramm machen.

1. Wireframes sind einfache Schwarz-Weiß-Layouts, die die spezifische Größe und Position von Seitenelementen, Website-Funktionen, Konversionsbereichen und der Navigation für Ihre Website oder Benutzeroberfläche skizzieren.

2. Sie enthalten keine Farben, Schriftarten, Logos oder andere Designelemente, die davon ablenken, sich ausschließlich auf die Struktur einer Webseite zu konzentrieren.

3. Wir sagen oft, dass Wireframes so etwas wie ein Bauplan für ein Haus sind. Was wir darin sehen, sind die Grundzüge einer Seite - das grundlegende Gerüst, wie sie aufgebaut ist und wie sie funktioniert.

Standardelemente auf dem Wireframe

Ein Wireframe enthält in der Regel die folgenden Standardelemente.

1. Logo
2. Suchfeld
3. Brotkrümel
4. Überschriften, einschließlich Seitentitel als H1 und Unterüberschriften H2-Hx
5. Navigationssysteme, einschließlich globaler Navigation und lokaler Navigation
6. Inhalt des Körpers
7. Schaltflächen zum Teilen
8. Kontaktinformationen
9. Fußzeile

Arten von Wireframes

Wireframes unterscheiden sich oft sowohl in der Produktion als auch in der Detailtiefe, die sie aufweisen. Basierend auf der Ebene der Wireframe-Produktion oder der Funktionalität können Wireframes in Low- und High-Fidelity-Wireframes unterteilt werden.

1. Low-Fidelity-Wireframes - ein minimalistischer Start: Low-Fidelity-Wireframes sind im Allgemeinen ein sehr einfacher Ausgangspunkt für das Design. Sie versuchen, die Navigation, den Rahmen und die Grundstruktur zu definieren. Low Fidelity Wireframes sind nützlich, um Gespräche zu beginnen und die grundlegenden Funktionen sowie das Navigationslayout festzulegen. Diese einfachen Skizzen sind nicht so nützlich, um tatsächliche Interaktionen, die Gewichtung von Elementen auf einer Seite oder das Testen von Prototypen auf Papier zu zeigen.
2. High-Fidelity-Wireframes - Design für die Details: High-Fidelity-Wireframes ergänzen die Details, die in ihren einfacheren Vorgängern fehlen. Sie definieren die Gewichtung und die visuelle Hierarchie der Seite, die eigentlichen Formular- und Interaktionselemente und oft auch Beschriftungen, Anleitungstext und einige Texte.

Wireframe Beispiele

Hier sind 2 Beispiele zu Ihrer Information.

Webseite Wireframe

iPhone UI Wireframe

Testen Sie kostenlos eine einfache Wireframe-Software.